<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %> 
<script src="/static/bootstrap-treeview/js/bootstrap-treeview.js"></script>   
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<body>
	<div class="container-fluid">

	<form id="addSpuForm">

		<div class="form-group row">
			<label for="goodsName" class="col-sm-2 col-form-label">名称</label>
			<div class="col-sm-10">
				<input type="text" class="form-control" name="goodsName"
					id="goodsName">
			</div>
		</div>

		<div class="form-group row">
			<label for="goodsCaption" class="col-sm-2 col-form-label">标题</label>
			<div class="col-sm-10">
				<input type="text" class="form-control" name="caption"
					id="goodsCaption">
			</div>
		</div>
		<div class="form-group row">
			<label for="goodsCaption" class="col-sm-2 col-form-label">品牌</label>
			<div class="col-sm-10">
				<select name="brandId" class="form-control" >
					<option>请选择</option>
					<c:forEach items="${brands }" var="item">
						<option value="${item.id }">${item.name }</option>
					</c:forEach>
				</select>
			</div>
		</div>
		<div class="form-group row">
			<div id="treeDiv" style="display: none;width: 80%; position:absolute; z-index:1010; background-color:white;">
				<div id="tree">
				</div>
			</div>
			<label for="goodsCaption" class="col-sm-2 col-form-label">分类</label>
			<div class="col-sm-5">
			<input type="hidden" name="categoryId"
					id="categoryId">
				<input type="text" class="form-control " name="categoryName"
					id="categoryName">
				
			</div>
			<div class="col-sm-2">
				<button type="button" class="btn btn-light" onclick="showTree()">……</button>
			</div>
			
		</div>

		<div class="form-group row">
			<label for="goodsSmapppic" class="col-sm-2 col-form-label">是否上架</label>
			<div class="col-sm-10">
				<input type="radio" value="1" name="isMarketable" checked="checked">上架
				&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <input type="radio" value="0"
					name="isMarketable" >不上架
			</div>
		</div>
		<div class="form-group row">
			<label for="goodsName" class="col-sm-2 col-form-label">文件</label>
			<div class="col-sm-10">
				<input type="file" class="form-control" name="file">
			</div>
		</div>
		<div class="form-group row">
			<button type="button" onclick="saveSpu()">添加</button>
		</div>
	</form>

</div>
<script type="text/javascript">

	$(function() {
		$.post('./category/tree?pid=0', function(data) {
			// {} 代表对象
			// [] 数组
			$('#tree').treeview({
				data : data,
				levels:5,
				onNodeSelected : function(event, data) {
					// 判断叶子节点
					if(data.nodes.length == 0){
						$("#categoryId").val(data.id)
						$("#categoryName").val(data.text)
						$("#treeDiv").hide()
					}
				}
			});
		}, "json")
	
	})
	function showTree() {
		$("#treeDiv").show()
	}
	function saveSpu() {
		var data = new FormData($("#addSpuForm")[0])
		
		$.ajax({
			url:'./spu/saveSpu',
			type:'post',
			contentType:false,
			processData:false,
			data:data,
			success:function(data){
			 	if(data==true){
                    alert('添加成功')
                    //跳转到列表页面
                    $("#content").load("./spu/list?currPage=1")
                }else{
                    alert('添加失败')
                }
			}
		})
		
	}
</script>
</body>
</html>